<template>
     <div class="page-search">
          <baseForm
               class="baseForm"
               v-bind="searchConfig"
               v-model="formData"
               :senior="senior"
               :nestingiframetype="nestingiframetype"
               ref="baseFormRef"
          >
               <template #footer>
                    <div class="btns" v-if="settomg">
                         <div class="lswit" title="显示样式">
                              <slot name="switchds"></slot>
                         </div>
                         <div class="btnClass info" @click="handleResetClick">
                              <i class="iconfont icon-reset"></i>
                              重置
                         </div>
                         <div
                              class="btnClass primary"
                              @click="handleQueryClick"
                         >
                              <i class="iconfont icon-wxbsousuotuiguang"></i>
                              查询
                         </div>
                         <!-- <div class="btns-query2 hui-linear-gradient-2" @click="seniorhandleQueryClick">高级检索</div> -->
                         <!-- <div class="btns-query hui-linear-gradient-2"> -->
                         <slot name="button"></slot>
                    </div>
               </template>
          </baseForm>
          <div class="btbaochong" v-if="!settomg">
               <el-button class="bt" @click="baocunClick">保存设置</el-button>
               <el-button class="bt" @click="chongzhiClick">重置默认</el-button>
          </div>
          <!-- 高级查询弹窗 -->
          <el-dialog
               title="高级查询"
               v-model="dialogVisible"
               width="30%"
               @close="handleClose"
          >
               <el-scrollbar height="350px">
                    <baseForm
                         v-bind="Advancedfilt"
                         v-model="formData"
                         :senior="'senior'"
                         ref="baseFormRef"
                    ></baseForm>
               </el-scrollbar>
               <template v-slot:footer>
                    <span class="dialog-footer">
                         <el-button @click="cancelClick">取 消</el-button>
                         <el-button type="primary" @click="queryClick">
                              查 询
                         </el-button>
                    </span>
               </template>
          </el-dialog>
     </div>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import baseForm from '@/baseUi/baseForm'
const baseFormRef = ref<any>()
interface IFormData {
     [key: string]: any
}
const props = defineProps({
     searchConfig: {
          type: Object as any,
          required: true,
     },
     Advancedfilt: {
          type: Object as any,
          required: false,
     },
     title: {
          type: String,
          default: '高级检索',
     },
     settomg: {
          type: Boolean,
          default: true,
     },
     senior: {
          type: String,
          default: '',
     },
     nestingiframe: {
          type: String,
          required: false,
     },
     startTimevalue: {
          type: String,
     },
     pageName: {
          type: String,
     },
     pagechange: {
          type: String,
     },
})
const emit = defineEmits([
     'queryBtnClick',
     'resetBtnClick',
     'searchChange',
     'departmentchange',
     'baocunvalClick',
     'chongzhivalClick',
])
const dialogVisible = ref(false)
const originFormData: IFormData = {}
// const formItems = ref(props.searchConfig?.formItems)
const avgformItems = props.Advancedfilt?.formItems ?? []
const formData = ref<IFormData>({})
const nestingiframetype = ref(props.nestingiframe)

// const updateVal =(data:any)=>{
//   // formData.value = data
//   emit('searchChange', data)
// }

watch(
     () => props.searchConfig?.formItems,
     (newValue) => {
          if (newValue) {
               for (const formItem of newValue) {
                    originFormData[`${formItem.field}`] =
                         formItem.initValue ?? ''
               }
               formData.value = { ...originFormData, ...formData.value }
          }
     },
     {
          immediate: true,
          deep: true,
     },
)
watch(
     formData,
     (newValue, oldvalue) => {
          emit('searchChange', newValue)
     },
     {
          deep: true,
     },
)

// 保存设置
const baocunClick = () => {
     console.log('保存设置', formData.value)
     emit('baocunvalClick', formData.value)
}
// 重置默认
const chongzhiClick = () => {
     emit('chongzhivalClick')
}

// 重置
const handleResetClick = () => {
     console.log('重置')
     for (const key in originFormData) {
          formData.value[`${key}`] = originFormData[key]
     }
     emit('resetBtnClick', formData.value)
}
const filterFormData = computed(() => {
     const filterData = Object.fromEntries(
          Object.entries(formData.value).map(([key, value]) => [
               key,
               value || '',
          ]),
     )
     Object.keys(filterData).forEach((item, index) => {
          if (item == 'undefined') {
               delete filterData[item]
          }
          if (!formData.value[item]) {
               ;(formData.value[item] as any) = ''
          }
     })
     return filterData
})
//查询
const handleQueryClick = () => {
     if (!baseFormRef.value?.formRef) return
     baseFormRef.value?.formRef.validate((valid: boolean): any => {
          if (valid) {
               // Object.keys(formData.value).forEach((item, index) => {
               //   if (!formData.value[item]) {
               //     (formData.value[item] as any) = ''
               //   }
               // })
               emit('queryBtnClick', filterFormData.value)
          } else {
               return false
          }
     })
}
// 高级查询
const seniorhandleQueryClick = () => {
     // console.log('高级查询',dialogVisible.value)
     dialogVisible.value = true
}
// 高级查询弹框点击取消
const cancelClick = () => {
     dialogVisible.value = false
}
// 高级查询弹框点击查询
const queryClick = () => {
     dialogVisible.value = false
     if (!baseFormRef.value?.formRef) return
     baseFormRef.value?.formRef.validate((valid: any): any => {
          if (valid) {
               emit('queryBtnClick', formData.value)
          } else {
               return false
          }
     })
}
const handleClose = () => {
     dialogVisible.value = false
}
// 暴露给父组件
defineExpose({
     handleResetClick,
     handleQueryClick,
     filterFormData,
})
</script>

<style scoped lang="scss">
.page-search {
     width: 100%;
     height: 100%;

     .baseForm {
          width: 100%;
          height: 100%;

          flex-shrink: 0;
     }
}

.btns {
     text-align: left;
     margin-left: 50px;
     display: flex;
     align-items: center;
     gap: 5px;

     .lswit {
          margin-right: 15px;
     }

     .btns-query2 {
          width: 70px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          border-radius: 5px;
          font-size: 12px;
          display: inline-block;
          text-align: center;
          cursor: pointer;
     }
}

.btbaochong {
     width: 100%;
     display: flex;
     margin-top: 70px;
     justify-content: space-around;

     .bt {
          padding: 20px 70px;
          background-color: #409eff;
          border: #409eff;
          color: #fff;
     }
}

::v-deep(.el-dialog) {
     background-color: #2c3d60;
     border-radius: 5px;

     .el-dialog__title {
          color: #fff;
          font-size: 14px;
     }

     .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
     }
}
</style>
